<template>
  <div className="flex mx-[40px] max-w-[92%] my-[25px]">
    <div className="mr-[10px]">
      <a-avatar>AI</a-avatar>
    </div>
    <div className="flex flex-col flex-1">
      <div className="text-slate-300 text-sm pr-[50px]]">时间</div>
      <div
        className="bg-slate-100 px-[12px] py-[6px] rounded-lg mt-[3px] w-full"
      >
        <!-- {{ props.content.content }} -->
        <!-- <div v-html="md.render(message)"></div> -->
        <!-- <VditorPreview :content="chiefComplaintContent" />
        <VditorEdit
          v-model="chiefComplaintContent"
          :options="{
            mode: 'ir',
            outline: { enable: false, position: 'right' },
            toolbarConfig: {
              pin: true,
            },
          }"
        /> -->

        <a-collapse v-model:activeKey="activeKey" ghost>
          <a-collapse-panel :key="step.id" v-for="(step, stepIndex) in plan">
            <template #header>
              <a-row>
                <a-col :span="20">
                  <span>
                    {{ step.title }}
                  </span>
                </a-col>
                <a-col :span="4" v-if="updateFlag">
                  <div
                    class="w-full h-full flex justify-end items-center"
                    @click.stop="addChildStep(step.id)"
                  >
                    <a-button type="text" size="small">
                      <PlusOutlined
                    /></a-button>
                  </div>
                </a-col>
              </a-row>
            </template>
            <template
              v-for="(stepItem, itemIndex) in step.children"
              :key="stepItem.id"
            >
              <!-- <div>
                <span>
                  {{ `${itemIndex + 1}. ` }}
                </span>
                <EditableContent
                  :ref="(el) => setEditableRef(el, stepIndex, itemIndex)"
                  :editable="updateFlag"
                  v-model="stepItem.title"
                />
              </div> -->
              <div class="flex items-start gap-2">
                <span class="text-slate-400 min-w-max pt-[5px]">
                  {{ `${itemIndex + 1}. ` }}
                </span>
                <div class="flex-1 min-w-0">
                  <EditableContent
                    :ref="(el) => setEditableRef(el, stepIndex, itemIndex)"
                    :editable="updateFlag"
                    v-model="stepItem.title"
                  />
                </div>
              </div>
            </template>
          </a-collapse-panel>
        </a-collapse>

        <div className="flex justify-end mt-[5px]">
          <a-button title="修改任务" shape="round" @click="updateTask">
            修改任务
          </a-button>
          <a-button
            title="开始任务"
            shape="round"
            class="ml-[10px]"
            @click="startTask"
          >
            开始任务
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {
    EditTwoTone,
    PlayCircleTwoTone,
    PlusOutlined,
  } from '@ant-design/icons-vue';
  import MarkdownIt from 'markdown-it';
  import { ref, defineAsyncComponent, reactive } from 'vue';
  import VditorPreview from '@/components/markdown/VditorPreview.vue';
  import VditorEdit from '@/components/markdown/VditorEdit.vue';
  const EditableContent = defineAsyncComponent(
    () => import('@/components/EditableArea.vue'),
  );
  const editable = ref(null);
  const chiefComplaintContent = ref(``);
  const md = new MarkdownIt();
  const message = ref('# markdown-it');
  const props = defineProps({
    content: {
      type: Object,
      default: () => ({}),
    },
  });
  const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
  const activeKey = ref([]);
  const generateUUID = (length = 16) => {
    const chars =
      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_';
    let result = '';
    for (let i = 0; i < length; i++) {
      result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
  };
  const plan = ref([
    {
      id: '39b16272-4c1d-4af0-a061-003431999d3f',
      title: '信息收集',
      status: 'todo',
      create_time: 1751444842,
      end_time: 1751444842,
      children: [
        {
          id: 'c9e22a92-1304-4f5a-9090-2fff57ea5a88',
          title: '收集豌豆实验的目的、材料、方法、步骤、结果等相关信息',
          status: 'todo',
          create_time: 1751444842,
          end_time: 1751444842,
        },
      ],
    },
    {
      id: '4e72e508-fec4-43ba-8bc3-33644084aece',
      title: '信息分析',
      status: 'todo',
      create_time: 1751444842,
      end_time: 1751444842,
      children: [
        {
          id: '60d59e10-0176-4218-a8c2-356ae2db17fe',
          title:
            '分析实验采用的方法、结果及其意义，研究实验在相关领域的影响和价值',
          status: 'todo',
          create_time: 1751444842,
          end_time: 1751444842,
        },
      ],
    },
    {
      id: '0fafe318-cbeb-4cd8-8969-1652c56f120e',
      title: '报告撰写与输出',
      status: 'todo',
      create_time: 1751444842,
      end_time: 1751444842,
      children: [
        {
          id: 'ccf59a70-aab3-4e41-8149-4e35214d6d2d',
          title:
            '根据分析结果，撰写涵盖实验概述、分析过程、结论等内容的完整报告',
          status: 'todo',
          create_time: 1751444842,
          end_time: 1751444842,
        },
        {
          id: 'f55296b2-214d-4d8f-8e2d-0503a3efe32b',
          title: '调用gen_web工具，输出网页格式的豌豆实验调研分析报告',
          status: 'todo',
          create_time: 1751444842,
          end_time: 1751444842,
        },
      ],
    },
  ]);

  const editableRefs = ref<any>([]);
  const setEditableRef = (el: any, stepIndex: any, itemIndex: any) => {
    // 如果该 stepIndex 下还没有数组，则初始化
    if (!editableRefs.value[stepIndex]) {
      editableRefs.value[stepIndex] = [];
    }
    // 存储组件实例
    editableRefs.value[stepIndex][itemIndex] = el;
  };
  const updateFlag = ref(false);
  const updateTask = () => {
    updateFlag.value = true;
    // 聚焦
  };
  const startTask = () => {
    console.log('开始任务', plan.value);
    updateFlag.value = false;
  };

  // 添加子步骤
  const addStep = () => {};
  const addChildStep = (parentId: any) => {
    const parentStep = plan.value.find((step) => step.id === parentId);
    if (!parentStep) return;

    const newChildStep = {
      id: generateUUID(),
      title: '新子步骤',
      status: 'todo',
      create_time: Math.floor(Date.now() / 1000),
      end_time: Math.floor(Date.now() / 1000),
    };

    if (!parentStep.children) {
      parentStep.children = [];
    }
    parentStep.children.push(newChildStep);
  };
</script>

<style scoped></style>
